<template>
  <n-select :options="options"
            :render-label="renderLabel"
            :render-tag="renderTag"
            v-model:value="curOption"
  ></n-select>

</template>

<script setup lang="ts">
import api from "@/api";
import {computed, h, onMounted, ref} from "vue";
import {NTag, NText, SelectRenderLabel, SelectRenderTag} from "naive-ui";
import StatusTag from "@/components/common/tag/StatusTag.vue";

const props = defineProps({
  option: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:option', 'update:start', 'update:end'])
const renderLabel: SelectRenderLabel = (option: any) => {
  return h('div', {
    style: {
      display: 'flex',
      alignItems: 'center'
    }
  }, {
    default: () => [
      h(StatusTag, {status: option.status}, {}),
      h(NText, null, {default: () => option.username}),

    ]
  })
}


const renderTag: SelectRenderTag = ({option}) => {
  return h('div', null, {default: () => option.username})
}

const options = ref()

onMounted(() => {
  console.log(props.option)
  getUserList()
})

const getUserList = () => {
  api.user.list({
    pageNo: 1,
    pageSize: 9999,
    orParams: '{}',
    andParams: '{}',
    orderParams: '{}'
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      console.log(tmp)
      Object.keys(tmp).forEach(key => {
        tmp[key].label = JSON.stringify(tmp[key])
        tmp[key].value = JSON.stringify(tmp[key])
        if (curOption.value&&tmp[key].username === JSON.parse(curOption.value).username) {
          curOption.value = tmp[key].value
        }
      })
      options.value = tmp
    }
  })
}

const curOption = computed({
  get() {
    return props.option
  },
  set(val) {
    emits('update:option', val)
  }
})
</script>

<style scoped>

</style>